<script setup lang="ts">

import { PropType } from "vue";
import ChatMessage from "./ChatMessage.vue";
import {ref} from "vue";
import { ChatMessageData } from "common";
defineProps({
  messages:{
    type: Object as PropType<ChatMessageData[]>,
    default:[]
  },
  showName:{
    type:Boolean,
    default:false
  },
  scroll:{
    type:Function,
    default:()=>{}
  }

})


const list = ref<HTMLDivElement | null>(null)

const scrollToEnd = ()=>{
  if(!list.value) {
    console.warn('list ref为空');
    return;
  }
  console.log(list.value.scrollTop)
  list.value.scrollTop=list.value.scrollHeight
}



defineExpose({scrollToEnd})

</script>

<template>
<div class="chat" ref="list" @scroll="scroll($event)">
  <chat-message v-for="(item) in messages" :message="item" :showName="showName"></chat-message>
</div>
</template>

<style scoped lang="scss">
.chat{
  padding: 20px 20px;
  background: #eee;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>
